<template>
    <div class="prize-model">
        {{ getPrizeModel }}
        <el-form id="contentForm"
                 :model="contentForm"
                 ref="contentForm"
                 :label-width="labelWidth"
                 class="inline-form"
                 :rules="rules">
            <el-form-item label="商品名称"
                          prop="goodsName">
                <el-input v-model="contentForm.goodsName"
                          name="goodsName"></el-input>
            </el-form-item>
            <el-form-item label="商品数量"
                          prop="stock">
                <el-input v-model.number="contentForm.stock"
                          name="stock"></el-input>
            </el-form-item>
            <el-form-item label="支付积分"
                          prop="exchangeScore">
                <el-input v-model.number="contentForm.exchangeScore"
                          name="exchangeScore"></el-input>
            </el-form-item>
            <el-form-item label="商品类型"
                          prop="goodsType">
                <el-select v-model="contentForm.goodsType"
                           @change="change"
                           placeholder="请选择">
                    <el-option v-for="(types,index) in selction"
                               :value="types.gtid"
                               :label="types.goodsTypeName"
                               :key="index">{{types.goodsTypeName}}
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="话费"
                          prop="bill"
                          v-if="phone=='充值卡'">
                <el-input v-model.number="contentForm.bill"
                          name="bill"
                          style="width: 85%;"></el-input>
                <span>分</span>
            </el-form-item>
            <el-form-item label="使用说明" v-if = "phone=='电子优惠券'">
                <quill-editor style="width: 600px;"
                              ref="myTextEditor"
                              @change="showChange($event)"
                              v-model="contentForm.instructions"
                              :options="editorDescription"></quill-editor>
                <el-input type="hidden" v-model="contentForm.instructions"></el-input>
            </el-form-item>
            <el-form-item label="商品分享标题"
                          prop="shareTitle">
                <el-input v-model="contentForm.shareTitle"
                          name="shareTitle"></el-input>
            </el-form-item>
            <el-form-item label="商品图片"
                          prop="imgSrc">
                <el-upload class="avatar-uploader"
                           :action="uploadImg.action"
                           :on-remove="handleRemove"
                           :on-preview="handlePreview"
                           :on-success="handleSuccess"
                           :limit="1"
                           :before-upload="qwe"
                           :file-list="fileList"
                           list-type="picture">
                    <el-button size="small"
                               type="primary">点击上传
                    </el-button>
                    <div slot="tip"
                         class="el-upload__tip">只能上传jpg/png文件
                    </div>
                </el-upload>
            </el-form-item>
            <el-form-item label="分享商品图片"
                          prop="shareImgUrl">
                <el-upload class="avatar-uploader"
                           :action="uploadImg.action"
                           :on-remove="handleRemove1"
                           :on-preview="handlePreview1"
                           :on-success="handleSuccess1"
                           :limit="1"
                           :before-upload="qwe1"
                           :file-list="fileList1"
                           list-type="picture">
                    <el-button size="small"
                               type="primary">点击上传
                    </el-button>
                    <div slot="tip"
                         class="el-upload__tip">只能上传300*300的jpg文件
                    </div>
                </el-upload>
            </el-form-item>
            <el-form-item label="日期范围"
                          required>
                <el-date-picker style="width: 376px"
                                v-model="msgInfoDate"
                                type="datetimerange"
                                range-separator="至"
                                format="yyyy-MM-dd HH:mm:ss"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                @change="renderMsgDate($event)"
                                @blur="blur"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                </el-date-picker>
                <div style="color:#f56c6c;font-size:12px;margin-bottom: -25px;"
                     v-if="dataShow">请填写日期范围
                </div>
            </el-form-item>
            <el-form-item label="是否置顶"
                          prop="topFlag">
                <el-radio-group name="topFlag"
                                v-model="contentForm.topFlag">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="砍价时间"
                          prop="bargainTime">
                <el-input v-model.number="contentForm.bargainTime"
                          name="bargainTime"
                          placeholder="单位/小时">
                </el-input>
            </el-form-item>
            <el-form-item label="单次砍价金额（积分）"
                          required>
                <el-col :span="11">
                    <el-form-item prop="scoreStart">
                        <el-input v-model.number="contentForm.scoreStart"
                                  name="scoreStart"
                                  style="width:40%"></el-input>
                    </el-form-item>
                </el-col>
                <el-col class="line"
                        :span="2"><span>至</span></el-col>
                <el-col :span="11">
                    <el-form-item prop="scoreEnd">
                        <el-input v-model.number="contentForm.scoreEnd"
                                  name="scoreEnd"
                                  style="width:40%"></el-input>
                    </el-form-item>
                </el-col>

            </el-form-item>
            <el-form-item label="最低金额"
                          prop="lowestQuotation">
                <el-input v-model="contentForm.lowestQuotation"
                          name="lowestQuotation"
                          :disabled="true">{{lowestQuotationCount}}
                </el-input>
            </el-form-item>
            <el-form-item label="砍价次数"
                          prop="bargainNum">
                <el-input v-model.number="contentForm.bargainNum"
                          name="bargainNum"></el-input>
            </el-form-item>
            <el-form-item label="商品简介"
                          prop="description">
                <quill-editor style="width: 600px;"
                              v-model="htmlCon"
                              ref="myTextEditor"
                              @change="descriptionChange($event)"
                              :options="editorOption"></quill-editor>
                <el-input type="hidden"
                          v-model="contentForm.description"
                          name="description"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           @click="submitPrizeHandle()">确定
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
    import {parseTime} from '@/utils/index'
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'
    import {quillEditor} from 'vue-quill-editor'
    import request from '@/utils/request'

    export default {
        name: 'productSet',
        props: ['json'],
        data() {
            return {
                uploadImg: {
                    action: '/activityConsole/periodicalMessage/uploadImage/'
                },
                dataShow: false,
                top: '',
                selction: [],
                couponCodeExcelFile: '',
                msgInfoDate: '',
                doll: false,
                htmlCon: '',
                htmlCon2: '',
                contentForm: {
                    goodsName: '',
                    stock: '',
                    exchangeScore: '',
                    topFlag: '',
                    bargainTime: '',
                    goodsType: '',
                    endTime: '',
                    beginTime: '',
                    imgSrc: '',
                    scoreStart: '',
                    scoreEnd: '',
                    lowestQuotation: '',
                    bargainNum: '',
                    description: '',
                    bill: '',
                    shareTitle: '',
                    shareImgUrl: '',
                    instructions:''
                },
                phone: '',
                fileList: [],
                fileList1: [],
                editFlag: false,
                baseForm: {},
                date: '',
                resetForm: {},
                tabIndex: 2,
                labelWidth: '175px',
                content: '',
                editorOption: {
                    placeholder: 'Hello World'
                },
                editorDescription: {
                    placeholder: '请输入使用说明'
                },
                rules: {
                    goodsName: [
                        {required: true, message: '请填写商品名称', trigger: 'change'}
                    ],
                    stock: [
                        {required: true, message: '请填写商品数量', trigger: 'change'},
                        {type: 'number', message: '请填写数字', trigger: 'change'}
                    ],
                    exchangeScore: [
                        {required: true, message: '请填写支付积分', trigger: 'change'},
                        {type: 'number', message: '请填写数字', trigger: 'change'}
                    ],
                    topFlag: [
                        {required: true, message: '请填写是否置顶', trigger: 'change'}
                    ],
                    bargainTime: [
                        {required: true, message: '请填写库存', trigger: 'change'},
                        {type: 'number', message: '请填写数字', trigger: 'change'}
                    ],
                    goodsType: [
                        {required: true, message: '请填写商品类型', trigger: 'change'}
                    ],
                    endTime: [
                        {type: 'string', required: true, message: '请上传图片', trigger: 'change'}
                    ],
                    // beginTime: [
                    //   { required: true, message: '请填写日期范围', trigger: ['blur', 'change'] }
                    // ],
                    imgSrc: [
                        {required: true, message: '请上传图片', trigger: 'change'}
                    ],
                    shareImgUrl: [
                        {required: true, message: '请上传图片', trigger: 'change'}
                    ],
                    scoreStart: [
                        {required: true, message: '请填写砍价最小值', trigger: 'change'},
                        {type: 'number', message: '请填写数字', trigger: 'change'}
                    ],
                    scoreEnd: [
                        {required: true, message: '请填写砍价最大值', trigger: 'change'},
                        {type: 'number', message: '请填写数字', trigger: 'change'}
                    ],
                    lowestQuotation: [
                        {required: true, message: '请填写最低金额', trigger: 'change'},
                        {type: 'number', message: '请填写数字', trigger: 'change'}
                    ],
                    bargainNum: [
                        {required: true, message: '请填写砍价次数', trigger: 'change'},
                        {type: 'number', message: '请填写数字', trigger: 'change'}
                    ],
                    description: [
                        {required: true, message: '请填写商品简介', trigger: 'change'}
                    ],
                    // bill: [
                    //   { required: true, message: '请填写库存', trigger: 'change' }
                    // ],
                    shareTitle: [
                        {required: true, message: '请填写分享商品标题', trigger: 'change'}
                    ]
                }
            }
        },
        mounted() {
            this.select()
            this.doll = this.json.templateMark === 'prizeclaw'
            this.$nextTick(function () {
                this.resetForm = JSON.parse(JSON.stringify(this.contentForm))
            })
        },
        computed: {
            getPrizeModel: function () {
                console.log(this.json)
                this.select()
                if (this.json.pageModel == 'productSet') {
                    const _this = this
                    if (this.json.prizeId) {
                        _this.editFlag = true
                    }
                }
            },
            lowestQuotationCount: function () {
                if (this.contentForm.exchangeScore !== '' & this.contentForm.bargainNum !== '' && this.contentForm.scoreEnd !== '') {
                    this.contentForm.lowestQuotation = parseInt(this.contentForm.exchangeScore) - (parseInt(this.contentForm.bargainNum) * parseInt(this.contentForm.scoreEnd))
                }
            }
        },
        components: {
            quillEditor
        },
        methods: {
            showChange(event) {
            },
            change(value) {
                console.log(value)
                for (let i = 0; i < this.selction.length; i++) {
                    if (this.selction[i].gtid === value) {
                        console.log(this.selction[i].goodsTypeName)
                        this.phone = this.selction[i].goodsTypeName
                    }
                }
            },
            select() {
                const _this = this
                _this.axios({
                    url: '/activityConsole/activityBargain/getGoodsTypeSelect'
                }).then(res => {
                    console.log(res)
                    if (res.data.status === '200') {
                        _this.selction = res.data.data
                        console.log(_this.selction)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            renderMsgDate() {
                console.log(this.msgInfoDate)
                if (this.msgInfoDate) {
                    this.contentForm.beginTime = parseTime(this.msgInfoDate[0])
                    this.contentForm.endTime = parseTime(this.msgInfoDate[1])
                }
            },
            blur() {
                console.log(this.msgInfoDate)
                if (this.msgInfoDate) {
                    this.dataShow = this.msgInfoDate.length === 0
                }
            },
            qwe(file) {
                const _this = this
                const b = file.type.indexOf('image') !== -1
                if (!b) {
                    _this.$message({
                        type: 'error',
                        message: '文件类型不支持'
                    })
                    return false
                }
                return true
            },
            handleRemove(file, fileList) {
                const _this = this
                console.log('handleRemove:===============================================')
                _this.fileList = fileList
            },
            handlePreview(file) {
                console.log('handlePreview:===============================================')
            },
            handleSuccess(response, file, fileList) {
                const _this = this
                console.log('handlePreviewSuccess:===============================================')
                _this.fileList = fileList
                const arr = []
                for (let i = 0; i < fileList.length; i++) {
                    arr.push(fileList[i].response.data)
                }
                _this.contentForm.imgSrc = arr.join()
                console.log(_this.contentForm.imgSrc)
            },
            //
            qwe1(file) {
                const _this = this
                const b = file.type.indexOf('image') !== -1
                if (!b) {
                    _this.$message({
                        type: 'error',
                        message: '文件类型不支持'
                    })
                    return false
                }
                return true
            },
            handleRemove1(file, fileList) {
                const _this = this
                console.log('handleRemove:===============================================')
                _this.fileList1 = fileList
            },
            handlePreview1(file) {
                console.log('handlePreview:===============================================')
            },
            handleSuccess1(response, file, fileList) {
                const _this = this
                console.log('handlePreviewSuccess:===============================================')
                _this.fileList1 = fileList
                const arr = []
                for (let i = 0; i < fileList.length; i++) {
                    arr.push(fileList[i].response.data)
                }
                _this.contentForm.shareImgUrl = arr.join()
                console.log(_this.contentForm.shareImgUrl)
            },
            descriptionChange(event) {
                this.contentForm.description = event.html
            },
            exchangeChange(event) {
                this.contentForm.notes = event.html
            },
            renderDate(date) {
                this.contentForm.effectiveTime = date
                this.baseForm.effectiveTime = date
            },
            submitPrizeHandle(index) {
                const _this = this
                _this.renderMsgDate()
                this.contentForm.activityInfoId = this.json.activityId
                console.log(this.contentForm)
                this.dataShow = !this.msgInfoDate
                const scoreEnd = _this.contentForm.scoreEnd
                const bargainNum = _this.contentForm.bargainNum
                const exchangeScore = _this.contentForm.exchangeScore
                const lowestQuotation = _this.contentForm.lowestQuotation
                const Surplus = exchangeScore - lowestQuotation
                this.$refs.contentForm.validate(valid => {
                    if (valid) {
                        if (lowestQuotation >= exchangeScore) {
                            _this.$alert('最低价格应该小于或等于原价', '填写的数据有误', {
                                confirmButtonText: '确定',
                                callback: function (action) {
                                    _this.$message({
                                        type: 'error',
                                        message: '非法操作'
                                    })
                                }
                            })
                        } else if (scoreEnd * bargainNum < Surplus) {
                            _this.$alert('最终砍价金额可能大于或等于商品最低价格', '填写的数据有误', {
                                confirmButtonText: '确定',
                                callback: function (action) {
                                    _this.$message({
                                        type: 'error',
                                        message: '非法操作'
                                    })
                                }
                            })
                        } else if (Surplus <= 0) {
                            _this.$alert('最低金额为0或者小于0', '填写的数据有误', {
                                confirmButtonText: '确定',
                                callback: function (action) {
                                    _this.$message({
                                        type: 'error',
                                        message: '非法操作'
                                    })
                                }
                            })
                        } else {
                            request({
                                url: '/activityConsole/activityBargain/addBargainMessage',
                                method: 'post',
                                data: this.contentForm
                            }).then(res => {
                                console.log(res)
                                if (res.status === '200') {
                                    _this.$refs.contentForm.resetFields()
                                    _this.msgInfoDate = ''
                                    _this.contentForm.scoreStart = ''
                                    _this.contentForm.scoreEnd = ''
                                    _this.htmlCon = ''
                                    _this.contentForm.topFlag = ''
                                    _this.contentForm.instructions = ''
                                    _this.fileList = []
                                    _this.fileList1 = []
                                }
                                const state = res.status === '200' ? 'success' : 'error'
                                _this.$message({
                                    type: state,
                                    message: res.description
                                })
                            }).catch(err => {
                                console.log(err)
                            })
                        }
                    }
                })
                // }
            },
            handleClick(tab, event) {
                // console.log(tab, event);
                /*
                * 奖品 tab 切换
                * 奖品配置内容一样  即  form  提交一样 内容一样
                * */
            }
        }
    }
</script>
